<template>
    <div>
        <div class="pkNavBar" :class="{isFixed: isFixed}" :style="topBarStyle">
            <div class="status" :style="statusStyle"></div>
            <div class="navBar">
                <div class="navLeft navItem"
                     @click="clickLeft"
                     :class="{expandWidth: expandSides}">
                    <slot name="navLeft">
                        <van-icon v-if="leftArrow" name="arrow-left" size="20"></van-icon>
                    </slot>
                </div>
                <div class="navCenter navItem">
                    <slot name="navCenter">{{title}}</slot>
                </div>
                <div class="navRight navItem"
                     @click="clickRight"
                     :class="{expandWidth: expandSides}">
                    <slot name="navRight"></slot>
                </div>
            </div>
        </div>
        <div class="topTemp" :class="{isFixed: isFixed}" :style="statusStyle"></div>
    </div>
</template>

<script>
    export default {
        name: 'pkNavBar',
        props: {
            // 定位方式
            isFixed: {
                type: Boolean,
                default: false
            },
            //是否扩展两边内容宽度
            expandSides: {
                type: Boolean,
                default: false
            },
            //是否显示左侧箭头
            leftArrow: {
                type: Boolean,
                default: false
            },
            //元素x-index
            zIndex: {
                type: Number,
                default: 7
            },
            title: {
                type: String,
                default: "标题"
            },
            //背景颜色
            background: {
                type: String,
                default: "#D82D11"
            },
            color: {
                type: String,
                default: "#FFFFFF"
            },
            size: {
                type: Number,
                default: 18
            }
        },
        components: {},

        data() {
            return {
                statusBarHeight: window.localStorage.getItem("statusBarHeight") || 0,
            }
        },

        created() {
        },
        computed: {
            topBarStyle() {
                return {
                    zIndex: this.zIndex,
                    background: this.background,
                    color: this.color,
                    fontSize: `${this.size}px`
                }
            },
            statusStyle() {
                return {
                    height: `${this.statusBarHeight}px`,
                    background: this.background,
                }
            }
        },
        watch: {},
        methods: {
            clickLeft() {
                this.$emit("click-left")
            },
            clickRight() {
                this.$emit("click-right")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pkNavBar {
        .navBar {
            box-sizing: border-box;
            height: 48px;
            padding-left: 15px;
            padding-right: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            .navItem {

            }
            .navLeft, .navRight {
                width: 50px;
            }
            .navLeft.expandWidth, .navRight.expandWidth {
                width: 100px;
            }
            .navLeft {
                display: flex;
                align-items: center;
                justify-content: left;
            }
            .navCenter {
                flex: 1;
                padding-left: 15px;
                padding-right: 15px;
                text-align: center;
            }
            .navRight {
                display: flex;
                align-items: center;
                text-align: right;
            }
        }
    }
    .pkNavBar.isFixed {
        position: fixed;
        width: 100%;
    }
    .topTemp {
        display: none;
    }
    .topTemp.isFixed {
        display: block;
    }
</style>
